<template>
  <div id="LabGreenChannel">
    <Breadcrumb content="绿色通道"/>
    <div class="bodyContent">
      <vxe-toolbar perfect>
        <template #buttons>
          <span class='padding-right-xs'>绿色通道</span>
          <vxe-button type="text" class="button-blue" icon="el-icon-circle-plus-outline" content="保存" @click="handleAddResult"></vxe-button>
        </template>
      </vxe-toolbar>

      <Splitpanes class="area">
        <Pane size="20">
          <el-scrollbar style="height: 100%">
            <div style="width:95%;">
              <el-form ref="formRef" :model="formData" label-width="80px" inline-message>
                <el-form-item label="就诊类型" prop="visitTypeId">
                  <SelectDataList
                    ref="employeeSelectRef"
                    :url="'/lis/bac/base/resistant-type/dict/list'"
                    :displayField="[
                      { title: '编号', props: 'code', width: '100' }, //列标题
                      { title: '耐药类型', props: 'name', width: '100' },
                      { title: '主键', props: 'id' }
                    ]"
                    :placeholder="'点击选择就诊类型'"
                    :searchParam="{
                      code: 'spectype'
                    }"
                    @selectDataRow="SelectRowClick"
                    v-model="formData.visitTypeName"
                    :inputWidth="'100%'"
                  />
                </el-form-item>

                <el-form-item label="病历号" prop="medicalRecordNumber">
                  <el-input v-model='formData.medicalRecordNumber' type='text' placeholder='请输入病历号' clearable></el-input>
                </el-form-item>

                <el-form-item label="姓名" prop="name">
                  <el-input v-model='formData.name' type='text' placeholder='请输入姓名' clearable></el-input>
                </el-form-item>

                <el-form-item label="性别" prop="sex">
                  <vxe-select v-model="formData.sex" placeholder="性别" clearable class-name="width-100-percentage" >
                    <vxe-option v-for="(item, index) in sexList" :key="index" :label="item.name" :value="item.code"></vxe-option>
                  </vxe-select>
                </el-form-item>

                <el-form-item label="病例年龄" prop="age">
                  <el-input style="max-width: 100px;width:70px;margin-right: 5px" class="input-with-select" v-model="formData.ageYear">
                    <template #append>岁</template>
                  </el-input>
                  <el-input style="max-width: 100px;width:70px;margin-right: 5px" class="input-with-select" v-model="formData.ageMonth">
                    <template #append>月</template>
                  </el-input>
                  <el-input style="max-width: 100px;width:70px" class="input-with-select" v-model="formData.ageDay">
                    <template #append>天</template>
                  </el-input>
                </el-form-item>

                <el-form-item label="是否紧急" prop="isItUrgent">
                  <el-switch v-model='formData.isItUrgent' inline-prompt active-text='是' inactive-text='否' active-value='1' inactive-value='0'></el-switch>
                </el-form-item>

                <el-form-item label="科室名称" prop="departmentName">
                  <SelectDataList
                    ref="employeeSelectRef3"
                    :url="'/api/lab/labSampleType/findSampleTypeList'"
                    :displayField="[
                      { title: '编号', props: 'sampleTypeCode', width: '100' }, //列标题
                      { title: '耐药类型', props: 'sampleTypeName', width: '100' },
                      { title: '主键', props: 'id' }
                    ]"
                    :placeholder="'点击选择科室名称'"
                    :searchParam="{
                      code: 'spectype'
                    }"
                    @selectDataRow="SelectRowClick3"
                    v-model="formData.departmentName"
                    :inputWidth="'100%'"
                  />
                </el-form-item>

                <el-form-item label="床号" prop="bedNumber">
                  <el-input v-model="formData.bedNumber" type="text"></el-input>
                </el-form-item>

                <el-form-item label="标本类型" prop="specTypeId">
                  <SelectDataList
                    ref="employeeSelectRef"
                    :url="'/api/lab/labSampleType/findSampleTypeList'"
                    :displayField="[
                      { title: '编号', props: 'sampleTypeCode', width: '100' }, //列标题
                      { title: '耐药类型', props: 'sampleTypeName', width: '100' },
                      { title: '主键', props: 'id' }
                    ]"
                    :placeholder="'点击选择标本类型'"
                    :searchParam="{
                      code: 'spectype'
                    }"
                    @selectDataRow="SelectRowClick2"
                    v-model="formData.sampleName"
                    :inputWidth="'100%'"
                  />
                </el-form-item>

                <el-form-item label="申请号" prop="applicationNumber">
                  <el-input v-model="formData.applicationNumber" type="text"></el-input>
                </el-form-item>

                <el-form-item label="检测目的" prop="purposeOfTesting">
                  <el-input v-model="formData.purposeOfTesting" type="textarea"></el-input>
                </el-form-item>

                <el-form-item label="诊断名称" prop="diagnosticName">
                  <el-input v-model="formData.diagnosticName" type="text"></el-input>
                </el-form-item>

                <el-form-item label="诊断描述" prop="diagnosticDescription">
                  <el-input v-model="formData.diagnosticDescription" type="text"></el-input>
                </el-form-item>

                <el-form-item label="送检医师" prop="submittingPhysicianId">
                  <SelectDataList
                    ref="employeeSelectRef"
                    :url="'/api/lab/labSampleType/findSampleTypeList'"
                    :displayField="[
                      { title: '编号', props: 'sampleTypeCode', width: '100' }, //列标题
                      { title: '耐药类型', props: 'sampleTypeName', width: '100' },
                      { title: '主键', props: 'id' }
                    ]"
                    :placeholder="'点击选择送检医师'"
                    :searchParam="{
                      code: 'spectype'
                    }"
                    @selectDataRow="SelectRowClick4"
                    v-model="formData.submittingPhysicianName"
                    :inputWidth="'100%'"
                  />
                </el-form-item>

                <el-form-item label="申请时间" prop="applicationTime">
                  <el-date-picker style="width:100%;" v-model="formData.applicationTime" type="datetime" placeholder="选择检验日期" />
                </el-form-item>

                <el-form-item label="采样时间" prop="samplingTime">
                  <el-date-picker style="width:100%;" v-model="formData.samplingTime" type="datetime" placeholder="选择检验日期" />
                </el-form-item>

                <el-form-item label="上机时间" prop="onScreenTime">
                  <el-date-picker style="width:100%;" v-model="formData.onScreenTime" type="datetime" placeholder="选择检验日期" />
                </el-form-item>

                <el-form-item label="报告时间" prop="reportTime">
                  <el-date-picker style="width:100%;" v-model="formData.reportTime" type="datetime" placeholder="选择检验日期" />
                </el-form-item>

                <el-form-item label="打印时间" prop="printingTime">
                  <el-date-picker style="width:100%;" v-model="formData.printingTime" placeholder="选择检验日期" />
                </el-form-item>

                <el-form-item label="检验医师" prop="laboratoryPhysicianId">
                  <SelectDataList
                    ref="employeeSelectRef"
                    :url="'/api/lab/labSampleType/findSampleTypeList'"
                    :displayField="[
                      { title: '编号', props: 'sampleTypeCode', width: '100' }, //列标题
                      { title: '耐药类型', props: 'sampleTypeName', width: '100' },
                      { title: '主键', props: 'id' }
                    ]"
                    :placeholder="'点击选择标本类型'"
                    :searchParam="{
                      code: 'spectype'
                    }"
                    @selectDataRow="SelectRowClick4"
                    v-model="formData.laboratoryPhysicianName"
                    :inputWidth="'100%'"
                  />
                </el-form-item>

                <el-form-item label="审核医师" prop="reviewedByPhysicianId">
                  <SelectDataList
                    ref="employeeSelectRef"
                    :url="'/api/lab/labSampleType/findSampleTypeList'"
                    :displayField="[
                      { title: '编号', props: 'sampleTypeCode', width: '100' }, //列标题
                      { title: '耐药类型', props: 'sampleTypeName', width: '100' },
                      { title: '主键', props: 'id' }
                    ]"
                    :placeholder="'点击选择标本类型'"
                    :searchParam="{
                      code: 'spectype'
                    }"
                    @selectDataRow="SelectRowClick4"
                    v-model="formData.reviewedByPhysicianName"
                    :inputWidth="'100%'"
                  />
                </el-form-item>

                <el-form-item label="备注" prop="remarkId">
                  <SelectDataList
                    ref="employeeSelectRef"
                    :url="'/api/lab/labSampleType/findSampleTypeList'"
                    :displayField="[
                      { title: '编号', props: 'sampleTypeCode', width: '100' }, //列标题
                      { title: '耐药类型', props: 'sampleTypeName', width: '100' },
                      { title: '主键', props: 'id' }
                    ]"
                    :placeholder="'点击选择标本类型'"
                    :searchParam="{
                      code: 'spectype'
                    }"
                    @selectDataRow="SelectRowClick4"
                    v-model="formData.remarkName"
                    :inputWidth="'100%'"
                  />
                </el-form-item>

                <el-form-item label="组织名称" prop="organizationName">
                  <el-input v-model="formData.organizationName" disabled type="text"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-scrollbar>
        </Pane>

        <Pane size="40">
          <Splitpanes horizontal  style="height: calc(100%)">
            <Pane size="70">
                <div class="buttonBox">
                  <vxe-button type='text' icon='vxe-icon-delete' class='button-red' content='删除' @click='handleDelete'></vxe-button>
                </div>
                  <div class="tableBox">
                  <vxe-table ref='formTableDataTabel' border align='left' class='mytable-scrollbar' height="auto"
                             :data='formTableData'
                             :expand-config='{ expandAll: true, reserve: true }'
                             keep-source>
                    <vxe-column type='checkbox' width='30px'></vxe-column>
                    <vxe-column field='feeCode' title='条码号'></vxe-column>
                    <vxe-column field='feeName' title='申请项目名称'></vxe-column>
                    <vxe-column field='errorMsg' title='异常提醒'></vxe-column>
                    <vxe-column field='qrTypeCode' title='条形类别代码'></vxe-column>
                    <vxe-column field='qrTypeName' title='条形类别名称'></vxe-column>
                    <vxe-column field='specimenContainer' title='标本容器'></vxe-column>
                    <vxe-column field='samplingLocation' title='采样部位'></vxe-column>
                    <vxe-column field='quantity' title='数量'></vxe-column>
                  </vxe-table>
                </div>
            </Pane>
            <Pane size="30">
              <div class="searchButtonBox">
                <vxe-input v-model="searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="getFeeItemList" @keyup="getFeeItemList" @search-click="getFeeItemList()"></vxe-input>

                <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="查找" @click="getFeeItemList"></vxe-button>
              </div>
               
                <div class="tableBox">
                <vxe-table ref='antibioticsDictTable' border align='left' class='mytable-scrollbar' height="auto"
                           :data='FeeItemList'
                           :expand-config='{ expandAll: true, reserve: true }'
                           :row-config='{ isCurrent: true, isHover: true }'
                           :keyboard-config='{isArrow: true, isTab: true, isEdit: false}'
                           :edit-config="{ trigger: 'dblclick', mode: 'row', showStatus: true }"
                           keep-source @current-change='roleRowClick'>
                  <vxe-column type="seq" title="序号" width="30" align="left"></vxe-column>
                  <vxe-column field='feeCode' width='30%' title='条形码'></vxe-column>
                  <vxe-column field='feeName' title='申请项目名称'></vxe-column>
                </vxe-table>
              </div>
            </Pane>
          </Splitpanes>
        </Pane>

        <Pane size="40">
            <div class="searchButtonBox">
              <vxe-input v-model="listStratDate" type="date" clearable class="vxeInputSearch" placeholder="开始时间"></vxe-input>
              <label>- </label>
              <vxe-input v-model="listEndDate" type="date" clearable class="vxeInputSearch" placeholder="结束时间"></vxe-input>

              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" @click="getPageList"></vxe-button>
              <vxe-button type='text' icon='vxe-icon-delete' class='button-red' content='删除' @click='pageListDelete'></vxe-button>
              </div>
              <div class="tableBox">
              <vxe-table ref='antibioticsDictTable' border align='left' class='mytable-scrollbar' height="auto"
                         :data='pageList'
                         :expand-config='{ expandAll: true, reserve: true }'
                         keep-source>
                <vxe-column type="seq" title="序号" width="30" align="left"></vxe-column>
                <vxe-column type="seq" title="序号" width="30" align="left"></vxe-column>
                <vxe-column field='barcode' title='条码号'></vxe-column>
                <vxe-column field='name' title='姓名'></vxe-column>
                <vxe-column field='gender' title='性别'></vxe-column>
                <vxe-column field='age' title='年龄'></vxe-column>
                <vxe-column field='medicalRecordNumber' title='病历号'></vxe-column>
                <vxe-column field='department' title='科室'></vxe-column>
                <vxe-column field='applicationProject' title='申请项目'></vxe-column>
                <vxe-column field='bedNumber' title='床号'></vxe-column>
                <vxe-column field='visitType' title='就诊类型'></vxe-column>
                <vxe-column field='specimenType' title='标本类型'></vxe-column>
              </vxe-table>
            </div>
        </Pane>

      </Splitpanes>
    </div>
  </div>
</template>
<script setup lang="ts">
  // 引入组件区 ==========
  import { getCurrentInstance, onMounted, reactive, ref } from 'vue';
  // import { formatDateTime } from '@/utils/common.ts';
  // import { GetRptGroupOptions } from '@/utils/SysOptionsHelper';
  import { LabMainInfoBtns } from './LabGreenChannelUtils';
  import SelectDataList from '@/components/SelectDataList.vue';
  import Breadcrumb from '@/components/Breadcrumb.vue'; //面包屑
  // import GoBack from '@/components/GoBack.vue'; //返回组件
  import { Splitpanes, Pane } from 'splitpanes';
  import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';


  onMounted(() => {
    getFeeItemList()
  });

  let sexList: any = reactive([{code:"1", name:"男"},{code:"0", name:"女"}]);
  const labmaininfobtns = ref(LabMainInfoBtns());
  let showBreadCrumbTag = ref(true)//当为true时显示的是普通面包屑 false显示的是返回组件
  let url = ref('');//抽屉要返回的路由地址
  let searchValue = ref('');
  let listStratDate = ref('');
  let listEndDate = ref('');

  let { proxy }: any = getCurrentInstance();
  const formRef = ref(); //表单ref标记

  // 表单绑定的数据类型限制
  interface FormDataVO {
    sampleName: string,
    sampleId: string,
    visitTypeName: string,
    visitTypeId: string,
    departmentId: string,
    departmentName: string,
    submittingPhysicianId: string,
    submittingPhysicianName: string,
    medicalRecordNumber: string,
    name: string,
    sex: string,
    ageYear: string,
    ageMonth: string,
    ageDay: string,
    isItUrgent: string,
    bedNumber: string,
    applicationNumber: string,
    purposeOfTesting: string,
    diagnosticName: string,
    diagnosticDescription: string,
    applicationTime: string,
    samplingTime: string,
    onScreenTime: string,
    reportTime: string,
    printingTime: string,
    laboratoryPhysicianId: string,
    laboratoryPhysicianName: string,
    reviewedByPhysicianId: string,
    reviewedByPhysicianName: string,
    remarkId: string,
    remarkName: string,
    organizationName: string,
  }
  // 表单绑定的数据
  let formData = reactive<FormDataVO>({
    sampleName: '',
    sampleId: '',
    visitTypeName: '',
    visitTypeId: '',
    departmentId: '',
    departmentName: '',
    submittingPhysicianId: '',
    submittingPhysicianName: '',
    medicalRecordNumber: '',
    name: '',
    sex: '',
    ageYear: '',
    ageMonth: '',
    ageDay: '',
    isItUrgent: '',
    bedNumber: '',
    applicationNumber: '',
    purposeOfTesting: '',
    diagnosticName: '',
    diagnosticDescription: '',
    applicationTime: '',
    samplingTime: '',
    onScreenTime: '',
    reportTime: '',
    printingTime: '',
    laboratoryPhysicianId: '',
    laboratoryPhysicianName: '',
    reviewedByPhysicianId: '',
    reviewedByPhysicianName: '',
    remarkId: '',
    remarkName: '',
    organizationName: '',
  });

  let FeeItemList = reactive([]);
  let pageList = reactive([]);
  let formTableData = reactive([])
  // let formTableDataCopy = reactive([])

  let visibleOutReporter: any = ref(false);
  //点击选择-就诊类型
  function SelectRowClick(row) {
    formData.visitTypeId = row.id;
    formData.visitTypeName = row.name;
    visibleOutReporter.value = false;
  }
  let visibleOutReporter2: any = ref(false);
  //点击选择-标本类型
  function SelectRowClick2(row) {
    formData.sampleId = row.id;
    formData.sampleName = row.sampleTypeName;
    visibleOutReporter2.value = false;
  }
  let visibleOutReporter3: any = ref(false);
  //点击选择-科室名称
  function SelectRowClick3(row) {
    formData.departmentId = row.id;
    formData.departmentName = row.sampleTypeName;
    visibleOutReporter3.value = false;
  }
  let visibleOutReporter4: any = ref(false);
  //点击选择-送检医师
  function SelectRowClick4(row) {
    formData.submittingPhysicianId = row.id;
    formData.submittingPhysicianName = row.sampleTypeName;
    visibleOutReporter4.value = false;
  }

  function handleAddResult() {
    if(formTableData.length == 0){
      VxeMessage('请选择申请项目', VxeNotifyType.warning);
      return;
    }

  }

  function getPageList(){

  }

  function pageListDelete(){

  }
  // 获取申请项目列表
  function getFeeItemList() {
    FeeItemList.length = 0;
    const url = '/lis/fee/item/findFeeItemList';
    let obj = {
      keyWords: searchValue.value
    };
    proxy.$http.get(url, { params: obj }).then((res: any) => {
        FeeItemList.push(...res.data);
      })
      .catch((err: any) => {
        proxy.$alert(err, '提示');
      });
  }

  /**
   * pane-中-点击下方列表任一行，移入上方列表
   */
  function roleRowClick({ row, rowIndex }: any) {
    formTableData.push({feeName:row.feeName,quantity:1})
  }

  /**
   * pane-中-点击上方列表删除，上方列表移出一行
   */
  function handleDelete() {
    const selectRows = (proxy.$refs.formTableDataTabel as any).getCheckboxRecords();
    if (selectRows.length <= 0) {
      VxeMessage('请勾选需要删除的数据', VxeNotifyType.warning);
      return;
    } else {
      selectRows.forEach((selectedRow) => {
        const index = formTableData.findIndex(row => row === selectedRow);
      if (index !== -1) {
        formTableData.splice(index, 1);
      }
      });
    }
  }

  function differenceById<T extends { name: string }>(list1: T[], list2: T[]): T[] {
    const set = new Set(list2.map(item => item.name));
    return list1.filter(item => !set.has(item.id));
  }


</script>
<style lang="scss" scoped>
  #LabGreenChannel {
    width: 100%;
    height: 100%;
    .bodyContent {
      // 面包屑40px  上下间距10px
      height: calc(100% - 60px);
      // 附加按钮间距
    .button-blue,
    .button-red {
      margin: 5px 0 5px 5px;
    }
      .area {
        border-top: 7px solid #f1f2f6;
        background-color: $base-white;
        height: calc(100% - 40px - 7px);
        :deep(.el-scrollbar__view) {
          height: 100%;
          .el-form {
            height: calc(100% - 20px);
            padding: 10px 15px;
            .el-checkbox {
              margin: 8px 10px 0 0;
            }
          }
        }
        :deep(.el-input-group__append){
          padding: 0 10px;
        }
        .buttonBox {
          display: flex;
          justify-content: start;
          .vxe-button {
            margin-right: 10px;
          }
          }
        }
        .searchButtonBox {
          padding: 0 10px;
        }
        .tableBox {
          height:calc(100% - 34px);
        }
      }
    }
  
</style>
